<template>
   <div class="top_header">
  <span v-for="(item,index) in topList" @click="changeTopList(item)">{{item.text}}</span>
</div>
<div class="card_content">
<playlist isTop :songList="songlist" showTime iconName="icon-yinle1" />
</div>

</template>

<script lang="ts" setup>
import Theader from '../main/cop/header.vue'
import playlist from '@/base-ui/TList/src/playList.vue';
import { useStore } from '@/store';

import { computed ,watchEffect,ref} from 'vue'


const topList = [
  {
    text: '全部',
    value: '0'
  },
    {
    text: '华语',
    value: '7'
  },
    {
    text: '欧美',
    value: '96'
  },
    {
    text: '日本',
    value: '8'
  },
      {
    text: '韩国',
    value: '16'
  },


]


const store = useStore()
 store.dispatch('music/getTopSong',0)


const songlist = ref()


watchEffect(()=>{
 songlist.value= store.state.music.topToplist

})
const updateTop = async()=>{


}

const changeTopList = (item: { text?: string; value: any; })=>{
  store.dispatch('music/getTopSong',item.value)

}
</script>
<style lang="less" scoped>
.card_content{
  margin-top: -220px;
  margin-left: 500px;
  width: 1000px;
  height: 500px;
  position: absolute;
}
.top_header{
  margin: -250px  550px;
 position: absolute;
  width: 520px;
  height: 50px;
  span{
    font-weight: 600;
    padding: 12px;
    font-size: 18px;
    font-family: Arial, Helvetica, sans-serif;
    cursor: pointer;
  }
}
</style>
